<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('新签合同') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('年份')">
        <DatePicker v-model="queryParams.year" type="year" value-format="yyyy" :placeholder="$t('年份')" :clearable="false" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" tooltip-effect="darkTable" :data="dataList" border @cell-click="cellClickHandle">
      <el-table-column :label="$t('团队')" align="center" prop="deptName" fixed min-width="150" show-overflow-tooltip />
      <el-table-column :label="$t('二月')" align="center" prop="february" min-width="100">
        <template slot-scope="scope">
          <el-link type="primary">{{ moneyFormat(scope.row.february / 10000) }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('三月')" align="center" prop="march" min-width="100">
        <template slot-scope="scope">
          <el-link type="primary">{{ moneyFormat(scope.row.march / 10000) }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('四月')" align="center" prop="april" min-width="100">
        <template slot-scope="scope">
          <el-link type="primary">{{ moneyFormat(scope.row.april / 10000) }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('五月')" align="center" prop="may" min-width="100">
        <template slot-scope="scope">
          <el-link type="primary">{{ moneyFormat(scope.row.may / 10000) }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('六月')" align="center" prop="june" min-width="100">
        <template slot-scope="scope">
          <el-link type="primary">{{ moneyFormat(scope.row.june / 10000) }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('七月')" align="center" prop="july" min-width="100">
        <template slot-scope="scope">
          <el-link type="primary">{{ moneyFormat(scope.row.july / 10000) }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('八月')" align="center" prop="august" min-width="100">
        <template slot-scope="scope">
          <el-link type="primary">{{ moneyFormat(scope.row.august / 10000) }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('九月')" align="center" prop="september" min-width="100">
        <template slot-scope="scope">
          <el-link type="primary">{{ moneyFormat(scope.row.september / 10000) }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('十月')" align="center" prop="october" min-width="100">
        <template slot-scope="scope">
          <el-link type="primary">{{ moneyFormat(scope.row.october / 10000) }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('十一月')" align="center" prop="november" min-width="100">
        <template slot-scope="scope">
          <el-link type="primary">{{ moneyFormat(scope.row.november / 10000) }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('十二月')" align="center" prop="december" min-width="100">
        <template slot-scope="scope">
          <el-link type="primary">{{ moneyFormat(scope.row.december / 10000) }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('一月')" align="center" prop="january" min-width="100">
        <template slot-scope="scope">
          <el-link type="primary">{{ moneyFormat(scope.row.january / 10000) }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('合计')" align="center" prop="total" min-width="100">
        <template slot-scope="scope">
          <el-link type="primary">{{ moneyFormat(scope.row.total / 10000) }}</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="$t('合同列表')" :visible.sync="contractOpen" custom-class="dialogNew" :close-on-click-modal="false" :lock-scroll="false" width="70%" append-to-body>
      <el-table v-loading="contractLoading" :data="contractList" border>
        <el-table-column :label="$t('合同名称')" align="center" prop="contractName" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="contractClickHandle(scope.row)">{{ scope.row.contractName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('项目名称')" align="center" prop="dealName" show-overflow-tooltip>
          <template slot-scope="scope">
            <router-link
              target="_blank"
              :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId}}"
              class="link_a"
            >{{ scope.row.dealName }}</router-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('预计签约时间')" align="center" prop="signingTime" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ parseTime(scope.row.signingTime) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('合同金额') + $t('金额单位')" align="center" prop="amount" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ moneyFormat(scope.row.amount, 'w') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('签约主体')" align="center" prop="mainBodyName" show-overflow-tooltip />
      </el-table>
    </el-dialog>

    <!-- 添加或修改合同信息对话框 -->
    <el-dialog :title="$t('合同信息')" :visible.sync="contractFormOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <oaContractForm ref="oaContractForm" />
    </el-dialog>
  </div>
</template>

<script>
import { countNewContract, getNewContractInfo } from '@/api/oa/contract/oaContract'
import oaContractForm from './oaContractForm.vue'
export default {
  components: {
    oaContractForm
  },
  data() {
    return {
      queryParams: {
        year: new Date().getFullYear() + ''
      },
      loading: false,
      dataList: [],
      contractOpen: false,
      contractFormOpen: false,
      contractLoading: false,
      contractList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      countNewContract(this.queryParams.year).then(res => {
        if (res.code === 200) {
          this.dataList = res.data
        }
        this.loading = false
      })
    },
    queryHandle() {
      this.getList()
    },
    cellClickHandle(row, column) {
      if (column.property !== 'deptName') {
        this.contractOpen = true
        this.contractLoading = true
        const params = {
          year: this.queryParams.year,
          month: column.property,
          deptId: row.deptId
        }
        getNewContractInfo(params).then(res => {
          if (res.code === 200) {
            this.contractList = res.data
          }
          this.contractLoading = false
        })
      }
    },
    contractClickHandle(row) {
      this.contractFormOpen = true
      this.$nextTick(() => {
        this.$refs.oaContractForm.init({ id: row.contractId })
      })
    }
  }
}
</script>

<style scoped>

</style>
